<template>
    <el-form ref="formRef" :rules="rules" :model="formData" label-width="120px">
        <!-- 智能体广场 -->
        <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">智能体广场</div>
            <el-form-item label="功能开关" prop="robot.is_open">
                <div class="w-[380px]">
                    <el-switch
                        v-model="formData.robot.is_open"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </div>
            </el-form-item>
            <el-form-item label="显示用户" prop="robot.is_user">
                <div class="w-[380px]">
                    <el-radio-group
                        v-model="formData.robot.is_user"
                        :active-value="1"
                        :inactive-value="0"
                    >
                        <el-radio :value="1">显示</el-radio>
                        <el-radio :value="0">隐藏</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="审核类型" prop="robot.audit_type">
                <div class="w-[380px]">
                    <el-radio-group
                        v-model="formData.robot.audit_type"
                        :active-value="1"
                        :inactive-value="0"
                    >
                        <el-radio :value="1">自动通过</el-radio>
                        <el-radio :value="0">人工审核</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="广场名称" prop="robot.name">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.robot.name"
                        show-word-limit
                    />
                </div>
            </el-form-item>
            <el-form-item label="横幅标题" prop="robot.title">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.robot.title"
                        show-word-limit
                    />
                </div>
            </el-form-item>
            <el-form-item label="横幅图片" prop="robot.banner">
                <material-picker tipsBtn="选择" v-model="formData.robot.banner" />
            </el-form-item>
        </el-card>

        <!-- 绘画广场 -->
        <el-card shadow="never" class="!border-none mt-4">
            <div class="text-xl font-medium mb-[20px]">绘画广场</div>
            <el-form-item label="功能开关" prop="draws.is_open">
                <div class="w-[380px]">
                    <el-switch
                        v-model="formData.draws.is_open"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </div>
            </el-form-item>
            <el-form-item label="显示用户" prop="draws.is_user">
                <div class="w-[380px]">
                    <el-radio-group
                        v-model="formData.draws.is_user"
                        :active-value="1"
                        :inactive-value="0"
                    >
                        <el-radio :value="1">显示</el-radio>
                        <el-radio :value="0">隐藏</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="审核类型" prop="draws.audit_type">
                <div class="w-[380px]">
                    <el-radio-group
                        v-model="formData.draws.audit_type"
                        :active-value="1"
                        :inactive-value="0"
                    >
                        <el-radio :value="1">自动通过</el-radio>
                        <el-radio :value="0">人工审核</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="广场名称" prop="draws.name">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.draws.name"
                        show-word-limit
                    />
                </div>
            </el-form-item>
            <el-form-item label="横幅标题" prop="draws.title">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.draws.title"
                        show-word-limit
                    />
                </div>
            </el-form-item>
            <el-form-item label="横幅图片" prop="draws.banner">
                <material-picker tipsBtn="选择" v-model="formData.draws.banner" />
            </el-form-item>
        </el-card>

        <!-- 视频广场 -->
        <el-card shadow="never" class="!border-none mt-4">
            <div class="text-xl font-medium mb-[20px]">视频广场</div>
            <el-form-item label="功能开关" prop="video.is_open">
                <div class="w-[380px]">
                    <el-switch
                        v-model="formData.video.is_open"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </div>
            </el-form-item>
            <el-form-item label="显示用户" prop="video.is_user">
                <div class="w-[380px]">
                    <el-radio-group
                        v-model="formData.video.is_user"
                        :active-value="1"
                        :inactive-value="0"
                    >
                        <el-radio :value="1">显示</el-radio>
                        <el-radio :value="0">隐藏</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="审核类型" prop="video.audit_type">
                <div class="w-[380px]">
                    <el-radio-group
                        v-model="formData.video.audit_type"
                        :active-value="1"
                        :inactive-value="0"
                    >
                        <el-radio :value="1">自动通过</el-radio>
                        <el-radio :value="0">人工审核</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="广场名称" prop="video.name">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.video.name"
                        show-word-limit
                    />
                </div>
            </el-form-item>
            <el-form-item label="横幅标题" prop="video.title">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.video.title"
                        show-word-limit
                    />
                </div>
            </el-form-item>
            <el-form-item label="横幅图片" prop="video.banner">
                <material-picker tipsBtn="选择" v-model="formData.video.banner" />
            </el-form-item>
        </el-card>

        <!-- 音乐广场 -->
        <el-card shadow="never" class="!border-none mt-4">
            <div class="text-xl font-medium mb-[20px]">音乐广场</div>
            <el-form-item label="功能开关" prop="music.is_open">
                <div class="w-[380px]">
                    <el-switch
                        v-model="formData.music.is_open"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </div>
            </el-form-item>
            <el-form-item label="显示用户" prop="music.is_user">
                <div class="w-[380px]">
                    <el-radio-group
                        v-model="formData.music.is_user"
                        :active-value="1"
                        :inactive-value="0"
                    >
                        <el-radio :value="1">显示</el-radio>
                        <el-radio :value="0">隐藏</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="审核类型" prop="music.audit_type">
                <div class="w-[380px]">
                    <el-radio-group
                        v-model="formData.music.audit_type"
                        :active-value="1"
                        :inactive-value="0"
                    >
                        <el-radio :value="1">自动通过</el-radio>
                        <el-radio :value="0">人工审核</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item label="广场名称" prop="music.name">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.music.name"
                        show-word-limit
                    />
                </div>
            </el-form-item>
            <el-form-item label="横幅标题" prop="music.title">
                <div class="w-[380px]">
                    <el-input
                        v-model.trim="formData.music.title"
                        show-word-limit
                    />
                </div>
            </el-form-item>
            <el-form-item label="横幅图片" prop="music.banner">
                <material-picker tipsBtn="选择" v-model="formData.music.banner" />
            </el-form-item>
        </el-card>

        <!-- 保存按钮 -->
        <el-card shadow="never" class="!border-none mt-4">
            <el-button
                v-perms="['square:setting:save']"
                :loading="loading"
                type="primary"
                @click="handleSubmit"
            >保存配置</el-button>
        </el-card>
    </el-form>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import squareRobotApi from '@/api/square/setting'

const loading = ref(false)
const formRef = ref()
const formData = reactive({
    robot: {
        is_open: 0,
        is_user: 0,
        audit_type: 0,
        name: '',
        title: '',
        banner: ''
    },
    draws: {
        is_open: 0,
        is_user: 0,
        audit_type: 0,
        name: '',
        title: '',
        banner: ''
    },
    video: {
        is_open: 0,
        is_user: 0,
        audit_type: 0,
        name: '',
        title: '',
        banner: ''
    },
    music: {
        is_open: 0,
        is_user: 0,
        audit_type: 0,
        name: '',
        title: '',
        banner: ''
    }
})

// 表单验证
const rules = {
    // Robot
    'robot.name': [
        { required: true,  message: '智能体广场名称不能为空', trigger: ['blur'] },
        { max: 100, message: '智能体广场标题不能超出100个字符', trigger: ['blur'] },
    ],
    'robot.title': [
        { required: true, message: '智能体广场横幅标题不能为空', trigger: ['blur'] },
        { max: 100, message: '智能体广场横幅标题不能超出100个字符', trigger: ['blur'] },
    ],
    // Draws
    'draws.name': [
        { required: true, message: '绘画广场名称不能为空', trigger: ['blur'] },
        { max: 100, message: '绘画广场标题不能超出100个字符', trigger: ['blur'] },
    ],
    'draws.title': [
        { required: true, message: '绘画广场横幅标题不能为空', trigger: ['blur'] },
        { max: 100, message: '绘画广场横幅标题不能超出100个字符', trigger: ['blur'] },
    ]
}

/**
 * 查询配置参数
 */
const queryConfigs = async (): Promise<void> => {
    const data = await squareRobotApi.detail()
    Object.assign(formData, data)
}

/**
 * 提交修改参数
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()

    loading.value = true
    await squareRobotApi.save(formData)
        .finally(() => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        })

    await queryConfigs()
    feedback.msgSuccess('保存成功')
}

onMounted(async () => {
    await queryConfigs()
})
</script>
